<template>
    <div class="pre-order">
        <h1>确认订单</h1>
        <!-- 表格 -->
        <qf-table :columns="columns" :tableData="tableData" :tableLoading="tableLoading" :border="false">
            <!-- 产品名称 -->
            <template v-slot:productName="{ row }">
                <img :src="row.imageUrl" style="vertical-align: middle;" height="20" alt="">
                <b style="color:red">{{ row.productName }}</b>
                <br>
                <b>{{ row.description }}</b>
            </template>
            <!-- 数量，自定义 -->
            <template v-slot:count="{ row }">
                <el-input-number v-model="count" @change="handleCountChange(row.price)" :min="1" :max="row.inventory"
                    label="描述文字"></el-input-number>
            </template>
            <!-- 总价 -->
            <template v-slot:total="{ row }">
                <b style="color:red">{{ tableTotal }}</b>
            </template>
        </qf-table>
        <!-- 确定订单 -->
        <div class="total-fee">
            <div class="box-wrap">
                <div class="box-shadow">
                    <span class="realpay--title" data-spm-anchor-id="a210c.1.0.i0.52681deblyKpHg">实付款：</span>
                    <span class="realpay--price-symbol">¥</span>
                    <span class="realpay--price" style="color: rgb(255, 80, 0)">{{ tableTotal }}</span>
                    <div class="order-confirmAddr">
                        <div class="confirmAddr-addr-user">
                            <span class="confirmAddr-title">充值详情：</span><span class="confirmAddr-pro">{{ desc }}</span>
                        </div>
                        <div class="confirmAddr-addr">
                            <span class="confirmAddr-title">充值账户：</span><span class="confirmAddr-usn">{{
                                    userInfo.nickname
                            }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="btn">
                <el-button type="danger" @click="commitOrder">提交订单</el-button>
            </div>
        </div>
    </div>

</template>




<script setup>
import qfTable from "@/components/qfTable/index.vue"
import * as api from "@/api/product"
import * as payApi from "@/api/vip";
import { useRoute,useRouter } from "vue-router";
import { ref, onMounted } from "vue";
import { userUser } from "../../../store/users";
import { storeToRefs } from "pinia";
import { ElMessage } from "element-plus";
// pinia的用户信息
let userStore = userUser()

let { userInfo } = storeToRefs(userStore)

let route = useRoute()
let router = useRouter()
// 业务
// 1.获取上一个页面传来的参数，获取当前产品信息
let { product_id } = route.query
// 2.展示产品信息
// 根据商品ID获取商品信息，发情求
// 声明详情
let desc = ref("")
let getProduct = async () => {
    tableLoading = true
    try {
        let res = await api.getProductApi(product_id)
        tableData.value = res.data.data
        desc.value = res.data.data[0].description

        // 初始值单价
        tableTotal.value = res.data.data[0].price
        tableLoading = false
    } catch (e) {
        console.log(e);
        tableLoading = false
    }
}
onMounted(() => {
    getProduct()
})

// 声明表格数据
let tableData = ref([])

// 声明动画
let tableLoading = ref(false)

// 声明一个对象，用于展示表格数据
let columns = ref([
    {
        label: "产品名称",
        prop: "productName"
    },
    {
        label: "单价",
        prop: "price"
    },
    {
        label: "数量",
        prop: "count"
    },
    {
        label: "总价",
        prop: "total"
    }
])

// 声明一个数量
let count = ref(1)

// 计算总价 (给人看的，不绝定最终付款的价格，留给后端)
let tableTotal = ref("0.00")
let handleCountChange = (price) => {
    tableTotal.value = (count.value * price).toFixed(2)
}


// 3.进行下单

// 支付核心
// 1、 下单：传递商品ID 和 商品数量
// 2、 传递订单ID
let commitOrder = async () => {
    // 1.调用下单接口传递 产品ID和产品数量quanitiy
    try{
        let res = await  payApi.preOrderApi(product_id,count.value)
        console.log(res);
        // 2.跳转页面到支付页面 pay/payMent
        router.push({path:"/pay/payMent",query:{order_id:res.data.order_id}})
        ElMessage({
            type:"success",
            message:res.data.msg
        })
    }catch(e){
        console.log(e);
    }
    

    // 3.payMent页面需要拉取订单详情，并发起支付
}
</script>

<style lang="less" scoped>
img {
    margin-right: 10px;
}

.price {
    color: #ff0036;
    font-weight: bolder;
}

.total_fee {
    font-size: 16px;
    color: #ff0036;
}

.el-button {
    width: 180px;
    border-radius: 0;
}

.confirm-title {
    text-align: left;
    margin-bottom: 30px;
}

.pre-order {
    padding: 80px 100px 0 100px;
}

.total-fee {
    margin-top: 50px;
    text-align: right;
}

.box-wrap {
    display: inline-block;
    border: 1px solid #ff0036;

    .box-shadow {
        border: 3px solid #fff0e8;
        min-width: 300px;
        padding: 10px 5px 10px 20px;

        .realpay--title {
            font-weight: 700;
            color: #333;
        }

        .realpay--price-symbol {
            font-size: 26px;
            margin-right: 4px;
            color: #999;
        }

        .realpay--price {
            color: #ff0036;
            font: 700 26px tahoma;
        }

        .order-confirmAddr {
            line-height: 1.6;
            font-weight: bolder;
            margin-top: 10px;
            font-size: 16px;

            // text-align: center;
            // font-family: "PingFang SC";
            .confirmAddr-usn {
                color: #ff0036;
                font-size: 20px;
            }

            .confirmAddr-pro {
                color: goldenrod;
                font-size: 16px;
            }
        }
    }
}
</style>